<template>
  <div class="NewHuman">
    <!-- <div class="center-header">
      <div class="comeplay">
        <span>欢迎来到XXX主持人团队！ 客服：13812341234</span>
      </div>
      <div class="loginRegister">
        <button class="login">登录</button>
        <button class="register">注册</button>
      </div>
    </div> -->
    <Head />
    <div class="logo">
      <img src="../../../assets/logo.png" alt="" />
    </div>
    <div class="NewHumanTab">
      <el-tabs type="border-card">
        <el-tab-pane label="用户管理">
          <WeddingFrom />
        </el-tab-pane>
      </el-tabs>
    </div>
    <div class="NewHuman-a">
      <el-button type="text" @click="outerVisible = true">策划师管理</el-button>
      <el-dialog :visible.sync="outerVisible">
        <div class="information">
          <div class="AddDayHeader">
            <img class="AddDayHeaderImg" src="" alt="" />
            <i class="titleText">策划师管理</i>
          </div>
          <div class="Tjia">
            <el-button type="primary" @click="innerVisible = true"
              >添加账号</el-button
            >
          </div>
          <div class="information-a">
            <el-table :data="tableData" border style="width: 100%">
              <el-table-column fixed prop="date" label="编号" width="150">
              </el-table-column>
              <el-table-column prop="name" label="策划师姓名" width="120">
              </el-table-column>
              <el-table-column prop="province" label="登录账号" width="120">
              </el-table-column>
              <el-table-column prop="city" label="下单量" width="120">
              </el-table-column>
              <el-table-column fixed="right" label="操作" width="120">
                <template slot-scope="scope">
                  <el-button
                    @click="handleClick(scope.row)"
                    type="text"
                    size="small"
                    >编辑</el-button
                  >
                  <el-button type="text" size="small">账号禁用</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
        <el-dialog width="30%" :visible.sync="innerVisible" append-to-body>
          <div class="information">
            <div class="AddDayHeader">
              <img class="AddDayHeaderImg" src="" alt="" />
              <i class="titleText">添加账号</i>
            </div>
            <div class="informationList">
              <div class="AddDayMid-a">
                <span class="AddDayMid-a-biao">策划师昵称:</span>
                <input class="AddDayMid-a-inp" type="text" />
              </div>
              <div class="AddDayMid-a">
                <span class="AddDayMid-a-biao">手机号:</span>
                <input class="AddDayMid-a-inp" type="text" />
              </div>
              <div class="AddDayMid-a">
                <span class="AddDayMid-a-biao">邮箱:</span>
                <input class="AddDayMid-a-inp" type="text" />
              </div>
              <div class="AddDayMid-a">
                <span class="AddDayMid-a-biao">密码:</span>
                <input class="AddDayMid-a-inp" type="text" />
              </div>
            </div>
          </div>
          <span slot="footer" class="dialog-footer">
            <el-button @click="centerDialogVisible = false">返 回</el-button>
            <el-button type="primary" @click="centerDialogVisible = false"
              >提 交</el-button
            >
          </span>
        </el-dialog>
      </el-dialog>
    </div>
    <div class="NewHuman-b">
      <el-button type="text" @click="dialogVisibleTwo = true"
        >公司资料</el-button
      >
      <el-dialog
        :visible.sync="dialogVisibleTwo"
        width="30%"
        :before-close="handleCloseTwo"
      >
        <div class="company">
          <div class="AddDayHeader">
            <img class="AddDayHeaderImg" src="" alt="" />
            <i class="titleText">公司资料</i>
          </div>
          <div class="AddDayMid-a">
            <span class="AddDayMid-a-biao">公司名称:</span>
            <span class="AddDayMid-a-inp">张撒旦撒旦三</span>
          </div>
          <div class="AddDayMid-a">
            <span class="AddDayMid-a-biao">姓名:</span>
            <span class="AddDayMid-a-inp">张三</span>
          </div>
          <div class="AddDayMid-a">
            <span class="AddDayMid-a-biao">手机号:</span>
            <input class="AddDayMid-a-inp" type="text" />
          </div>
          <div class="AddDayMid-a">
            <span class="AddDayMid-a-biao">邮箱:</span>
            <input class="AddDayMid-a-inp" type="text" />
          </div>
          <div class="AddDayMid-a">
            <span class="AddDayMid-a-biao">密码:</span>
            <input class="AddDayMid-a-inp" type="text" />
            <span class="tishi">*不修改请留空</span>
          </div>
          <div class="AddDayMid-a">
            <span class="AddDayMid-a-biao">确认密码:</span>
            <input class="AddDayMid-a-inp" type="text" />
          </div>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisibleTwo = false">取 消</el-button>
          <el-button type="primary" @click="dialogVisibleTwo = false"
            >提 交</el-button
          >
        </span>
      </el-dialog>
    </div>
    <Footer />
  </div>
</template>

<script>
import Head from "../../../components/Head";
import WeddingFrom from "./WeddingFrom";
import Footer from "../../../components/Footer";

export default {
  data() {
    return {
      outerVisible: false,
      innerVisible: false,
      dialogVisibleTwo: false,
      centerDialogVisible: false,
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
        },
      ],
    };
  },
  components: {
    WeddingFrom,
    Head,
    Footer,
  },
  methods: {
    handleCloseOne(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
    handleCloseTwo(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
    handleClick(row) {
      console.log(row);
    },
  },
};
</script>

<style scoped lang="less">
.NewHuman {
  position: relative;
  width: 100%;
}
.center-header {
  position: relative;
  width: 100%;
  height: 60px;
  line-height: 60px;
  background-color: darkgrey;
}
.PaginationBox {
  margin-top: 30px;
  bottom: 0px;
}
.NewHuman-a {
  position: absolute;
  left: 110px;
  top: 205px;
}
.NewHuman-b {
  position: absolute;
  left: 200px;
  top: 205px;
}
.logo {
  margin-left: 100px;
  margin-top: 20px;
  margin-bottom: 60px;
  width: 210px;
  height: 80px;
}
.loginRegister {
  position: absolute;
  top: 5px;
  right: 10px;
  margin-right: 50px;
}
.titleText {
  margin-left: 160px;
  font-size: 20px;
}
.AddDayHeaderImg {
  margin-left: 10px;
  margin-top: 20px;
  width: 90px;
  height: 50px;
  background-color: aquamarine;
}
.Tjia {
  margin-left: 550px;
  margin-top: -40px;
  font-size: 16px;
}
.information-a {
  margin-top: 30px;
}
.AddDayMid-a {
  font-size: 16px;
  margin-left: 50px;
  margin-top: 20px;
}
.AddDayMid-a-inp {
  margin-left: 20px;
}
.AddDayMid-a-inp-t {
  margin-left: 70px;
}
.tishi {
  color: red;
  font-size: 12px;
}
</style>